{extend name="public/container"}
{block name="content"}
<div id="myApp">
    <div class="douxue-filter padding-10 mb-20" style="margin-bottom:20px">
        <h3>用户资料</h3>
        <el-row :gutter="20">
                <el-col :span="24">
                    <div class="grid-content bg-purple" style="display:flex;align-items:center">
                        <el-image
                        style="width: 100px; height: 100px;margin:20px;border-radius:50px;"
                        :src="avatar">
                        </el-image>
                        <div class="grid-content bg-purple"><h4>{{nickname}}</h4></div>
                    </div>
                </el-col>
                <!-- <el-col :span="6" style="display:flex;align-items:center">
                    <span>身份：</span>
                    <el-select placeholder="身份" v-model="duser.role_id" :disabled="role_id_disabled">
                        <el-option
                            v-for="item in roleOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-select>
                    <el-button type="primary" v-if="role_id_disabled" plain @click="editButton('role_id_disabled')">编辑</el-button>
                    <el-button type="success" v-if="!role_id_disabled" plain @click="saveButton('role_id_disabled')">保存</el-button>
                </el-col> -->
                <el-col :span="8" style="display:flex;align-items:center">
                    <span>手机号：</span>
                    <el-input v-model="duser.mobile" placeholder="请输入内容" style="width:80%" maxlength=11 min=13000000000 minlength=11 :disabled="mobile_disabled"></el-input>
                    <el-button type="primary" v-if="mobile_disabled" plain @click="editButton('mobile_disabled')">编辑</el-button>
                    <el-button type="success" v-if="!mobile_disabled" plain @click="saveButton('mobile_disabled')">保存</el-button>
                </el-col>
                <el-col :span="8" style="display:flex;align-items:center">
                    <span>推广人等级：</span>
                    <el-select placeholder="推广人等级" v-model="duser.level" :disabled="level_disabled">
                        <el-option
                            v-for="item in levelOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-select>
                    <el-button type="primary" v-if="level_disabled" plain @click="editButton('level_disabled')">编辑</el-button>
                    <el-button type="success" v-if="!level_disabled" plain @click="saveButton('level_disabled')">保存</el-button>
                </el-col>
                <el-col :span="8" style="display:flex;align-items:center">
                    <span>上级推广人：</span>
                    <el-select placeholder="上级推广人" v-model="duser.pid" :disabled="pid_disabled" filterable>
                        <el-option :key=0 label="--请选择上级推广人--" :value=0 >
                        </el-option>
                        <el-option
                            v-for="item in userOptions"
                            :key="item.id"
                            :label="item.nickname"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    <el-button type="primary" v-if="pid_disabled" plain @click="editButton('pid_disabled')">编辑</el-button>
                    <el-button type="success" v-if="!pid_disabled" plain @click="saveButton('pid_disabled')">保存</el-button>
                </el-col>
            </el-row>
            <hr>
            <h4 class="title">佣金记录</h4>
            <br>
            <el-row>
                <el-col :span="24">
                    <el-table
                        :data="countData"
                        border
                        style="width: 100%">
                        <el-table-column
                        prop="total_com"
                        label="佣金总额（元）">
                        </el-table-column>
                        <el-table-column
                        prop="direct_com"
                        label="直推佣金（元）">
                        </el-table-column>
                        <el-table-column
                        prop="fission_com"
                        label="裂变佣金（元）">
                        </el-table-column>
                        <el-table-column
                        prop="withdrawed_amount"
                        label="已提现（元）">
                        </el-table-column>
                        <el-table-column
                        prop="balance"
                        label="待提现（元）">
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
    </div>
    <div class="douxue-filter padding-10 mb-20" style="margin-bottom:20px">
    <el-row>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelectTable">
            <el-menu-item index="commission">佣金记录</el-menu-item>
            <el-menu-item index="direct">直推记录</el-menu-item>
            <el-menu-item index="fission">裂变记录</el-menu-item>
            <el-menu-item index="down">他的下级</el-menu-item>
        </el-menu>
        </el-row>
            <br>
        <el-row v-if="activeIndex!='down'">
            <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
        </el-row>
        <br>
        <el-row  v-if="activeIndex=='commission'">
            <el-col :span="24">
                <el-table
                    :data="commissionData.data"
                    border
                    style="width: 100%">
                    <el-table-column
                    prop="create_time"
                    label="时间">
                    </el-table-column>
                    <el-table-column
                    prop="type"
                    label="入账/提现">
                    </el-table-column>
                    <el-table-column
                    prop="order_type"
                    label="订单类型">
                    </el-table-column>
                    <el-table-column
                    prop="order_amount"
                    label="订单金额（元）">
                    </el-table-column>
                    <el-table-column
                    prop="commission"
                    label="佣金金额（元）">
                    </el-table-column>
                    <el-table-column
                    prop="balance"
                    label="余额（元）">
                    </el-table-column>
                </el-table>
            </el-col>
            <div class="pagination">
                <el-pagination
                    hide-on-single-page
                    size="mini"
                    background
                    layout="prev, pager, next"
                    :total="commissionData.total"
                    :page-size="10"
                    @current-change="handlePageUpdate">
                </el-pagination>
            </div>
        </el-row>
        <el-row  v-if="activeIndex=='direct'">
            <el-col :span="24">
                <el-table
                    :data="directData.data"
                    border
                    style="width: 100%">
                    <el-table-column
                    prop="create_time"
                    label="时间">
                    </el-table-column>
                    <el-table-column
                    prop="order_no"
                    label="订单号">
                    </el-table-column>
                    <el-table-column
                    prop="goods_name"
                    label="商品名称">
                    </el-table-column>
                    <el-table-column
                    prop="order_amount"
                    label="订单金额（元）">
                    </el-table-column>
                    <el-table-column
                    prop="commission"
                    label="入账佣金（元）">
                    </el-table-column>
                </el-table>
            </el-col>
            <div class="pagination">
                <el-pagination
                    hide-on-single-page
                    size="mini"
                    background
                    layout="prev, pager, next"
                    :total="directData.total"
                    :page-size="10"
                    @current-change="handlePageUpdate">
                </el-pagination>
            </div>
        </el-row>
        <el-row  v-if="activeIndex=='fission'">
            <el-col :span="24">
                <el-table
                    :data="fissionData.data"
                    border
                    style="width: 100%">
                    <el-table-column
                    prop="user_name"
                    label="推广人">
                    </el-table-column>
                    <el-table-column
                    prop="create_time"
                    label="时间">
                    </el-table-column>
                    <el-table-column
                    prop="order_no"
                    label="订单号">
                    </el-table-column>
                    <el-table-column
                    prop="goods_name"
                    label="商品名称">
                    </el-table-column>
                    <el-table-column
                    prop="order_amount"
                    label="订单金额（元）">
                    </el-table-column>
                    <el-table-column
                    prop="commission"
                    label="入账佣金（元）">
                    </el-table-column>
                </el-table>
            </el-col>
            <div class="pagination">
                <el-pagination
                    hide-on-single-page
                    size="mini"
                    background
                    layout="prev, pager, next"
                    :total="fissionData.total"
                    :page-size="10"
                    @current-change="handlePageUpdate">
                </el-pagination>
            </div>
        </el-row>
        <el-row  v-if="activeIndex=='down'">
            <el-col :span="24">
                <el-table
                    :data="downUserData.data"
                    border
                    style="width: 100%">
                    <el-table-column
                    prop="nickname"
                    label="推广人姓名">
                    </el-table-column>
                    <el-table-column
                    prop="create_time"
                    label="绑定时间">
                    </el-table-column>
                    <el-table-column
                    prop="mobile"
                    label="联系方式">
                    </el-table-column>
                    <el-table-column
                    prop="total_order_amount"
                    label="售出订单（元）">
                    </el-table-column>
                    <el-table-column
                    prop="total_com"
                    label="已获佣金（元）">
                    </el-table-column>
                </el-table>
            </el-col>
            <div class="pagination">
                <el-pagination
                    hide-on-single-page
                    size="mini"
                    background
                    layout="prev, pager, next"
                    :total="downUserData.total"
                    :page-size="10"
                    @current-change="handlePageUpdate">
                </el-pagination>
            </div>
        </el-row>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var userId=<?php echo $id?>;
    var my = new Vue({
        el: "#myApp",
        data: {
            avatar:"",
            nickname:"",
            role_id_disabled:true,
            mobile_disabled:true,
            pid_disabled:true,
            level_disabled:true,
            roleOptions:[{label:"家长",value:1},{label:"学生",value:2}],
            levelOptions:[{label:"高级推广人",value:0},{label:"一级推广人",value:1},{label:"二级推广人",value:2},{label:"三级推广人",value:3}],
            userOptions:[],
            countData: [{
                    total_com: 0,
                    direct_com: 0,
                    fission_com: 0,
                    withdrawed_amount: 0,
                    balance: 0
                }],
            duser:{},
            activeIndex:"commission",
            dateRange:"",
            timeRange:[0,0],
            commissionData:{
                total:0,
                data:[],
            },
            downUserData:{
                total:0,
                data:[],
            },
            directData:{
                total:0,
                data:[],
            },
            fissionData:{
                total:0,
                data:[],
            },
            pages:{
                commission:1,
                direct:1,
                fission:1,
                down:1,
            }
        },
        methods: {
            getUserDetail(){
                url=Url({a:'getUserDetail' , q:{id:userId}})
                var that= this
                axios.get(url).then(res => {
                        user=res.data.data.user
                        that.duser=res.data.data.distribution_user
                        that.avatar=user.avatar
                        that.nickname=user.nickname
                        that.countData=[that.duser]
                    })
            },
            doGetUserList(){
                url=Url({a:'getUserList'})
                axios.get(url)
                    .then(res => {
                    this.userOptions=res.data.data
                    })
            },
            editButton(type){
                switch(type){
                    case "role_id_disabled":
                        this.role_id_disabled=!this.role_id_disabled
                        break;
                        case "mobile_disabled":
                        this.mobile_disabled=!this.mobile_disabled
                        break;
                        case "pid_disabled":
                        this.pid_disabled=!this.pid_disabled
                        break;
                        case "level_disabled":
                        this.level_disabled=!this.level_disabled
                        break;
                }
            },
            saveButton(type){
                var data={}
                switch(type){
                    case "role_id_disabled":
                        this.role_id_disabled=!this.role_id_disabled
                        data.role_id=this.duser.role_id;
                        break;
                        case "mobile_disabled":
                        this.mobile_disabled=!this.mobile_disabled
                        data.mobile=this.duser.mobile;
                        break;
                        case "pid_disabled":
                        this.pid_disabled=!this.pid_disabled
                        data.pid=this.duser.pid;
                        break;
                        case "level_disabled":
                        this.level_disabled=!this.level_disabled
                        data.level=this.duser.level;
                        break;
                }
                var that= this

                url=Url({a:'updateUserInfo' , q:{id:userId}})
                axios.post(url,data).then(res => {
                    this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                        })
                    })
            },
            handlePageUpdate(page){
                switch(this.activeIndex){
                    case "commission":
                        this.pages.commission=page;
                        break;
                    case "direct":
                        this.pages.direct=page;
                        break;
                    case "fission":
                        this.pages.fission=page;
                        break;
                    case "down":
                        this.pages.down=page;
                        break;
                }
                this.getListData();
            },
            //tab切换
            handleSelectTable(key,keyPath){
                this.activeIndex=key
                this.getListData();
            },
            getListData(){
                switch(this.activeIndex){
                    case 'commission':
                        this.getCommissionRecord();
                        break;
                    case 'down':
                        this.getDownUserList();
                        break;
                    case 'direct':
                        this.getDirectOrderData();
                        break;
                    case 'fission':
                        this.getFissionOrderData();
                        break;
                };
            },
            //获取佣金记录
            getCommissionRecord(){
                url=Url({a:'getCommissionRecord' , q:{id:userId,start:this.timeRange[0],end:this.timeRange[1],page:this.pages.commission}})
                axios.get(url).then(res => {
                    this.commissionData=res.data.data
                })
            },
            //将日期转为时间戳
            parseDateToTimestamp(){
                if(this.dateRange.length==2){
                    return [this.dateRange[0].getTime()/1000,this.dateRange[1].getTime()/1000];
                }
                return [0,0];
            },
            //获取下级用户列表
            getDownUserList(){
                url=Url({a:'getDownUserList' , q:{id:userId,start:this.timeRange[0],end:this.timeRange[1],page:this.pages.down}})
                axios.get(url).then(res => {
                    this.downUserData=res.data.data
                })
            },
            //获取直销订单列表
            getDirectOrderData(){
                url=Url({a:'getDirectOrderData' , q:{id:userId,start:this.timeRange[0],end:this.timeRange[1],page:this.pages.direct}})
                axios.get(url).then(res => {
                    this.directData=res.data.data
                })
            },
            //获取分销订单列表
            getFissionOrderData(){
                url=Url({a:'getFissionOrderData' , q:{id:userId,start:this.timeRange[0],end:this.timeRange[1],page:this.pages.fission}})
                axios.get(url).then(res => {
                    this.fissionData=res.data.data
                })
            },
        },
        mounted(){
            this.doGetUserList();
            this.getUserDetail();
            this.getCommissionRecord();
        },
        watch:{
            dateRange:{
                handler(newVal,oldVal){
                    times=this.parseDateToTimestamp();
                    this.timeRange=times;
                    this.getListData();
                },
        }
  }
    })
</script>
{/block}